Le HTML... c'est facile!


(ben, après avoir lu ça...)

La base du HTML :
Le HTML est la source de plusieurs sites web. Pour voir le HTML d'une page comme celle-ci, cliquez sur "Affichage" et ensuite sur "source". Le code se montrera en .txt (Bloc-notes / Notepad). Pour sauver du temps sur l'internet si vous voulez créer un site, écrivez le code AVANT dans un fichier bloc-notes et ensuite, vous n'aurez qu'à faire un "copier-coller" de votre travail.

<html> et </html> - la première et la dernière chose qui apparait dans le code
<title> et </title> - Vous devez retrouver ceci après le premier "html". Cela va vous permettre d'écrire un titre sur la bordure du haut de la fenêtre (Par exemple, ici, le titre du haut est "L E H T M L". On écrit le titre entre les deux "title".)
<body> et </body> - Le premier <body> doit aller tout de suite après le "TITLE" et le deuxième doit être placé à la fin. TOUT LE CODE EST PLACÉ ENTRE LES DEUX "BODY".

Exemple :
<html>
<title>L E H T M L</title>
<body>
(...le code pour la future page va ici...)
</body>
</html>


Commencer une nouvelle ligne de texte :
Tapez après la ligne désirée :
<br>

Exemple :
Première ligne
Deuxième ligne

Ici, le <br> a été placé après la phrase "Première ligne".


Séparer des paragraphes, des photos... ... ...
Écrivez <p> après la phrase, la photo... désirée

Exemple :
Première ligne

Deuxième ligne

Remarquez que l'espace est plus grand si on le compare au <br>.


Centrer (texte, images, etc.):
<center>Centre-moi!!</center>

Exemple :

Centre-moi!!

Mettre une ligne pour séparer :
Écrivez ce code : <hr> entre les deux parties à séparer

Exemple :
Première partie


Début de la deuxième partie
Écrire en italique :
<i>Le texte va ici, entre les eux "i"</i>

Exemple :
Le texte va ici, entre les eux "i"


Écrire en caractère gras :
<b>Le texte bla bla...</b>

Exemple :
Le texte bla bla...


Souligner le texte :
<u>Souligne la ligne de texte</u>

Exemple :
Souligne la ligne de texte


Aggrandir le texte :
<:h1>Taille</h1>

Exemple :

Taille 3

Taille 2

Taille 1

Vous pouvez écrire, par exemple, h2 ou h3. Cela fera changer la taille du texte comme vous pouvez le voir ci-dessus.


Rétrécir le texte :
<font size=1>Taille 1</font>

Exemple :
Taille 1
Taille 2

Vous pouvez écrire size=2 également.


Écrire en caractère de clavier (comme une machine à écrire) :
<kbd>Le texte va ici megnemegne!</kbd>

Exemple :
Le texte va ici megnemegne!


Faire un lien dans VOTRE site :
<a href=http://the_rbo.tripod.com/photos/photos.html>Photos de RBO</a>

Exemple :
Photos de RBO

Bien sûr, cet exemple est pris à partir d'une adresse internet de mon site. Il vous suffira juste à changer l'adresse (<a href=l'adresse choisie>).


Faire un lien vers UN AUTRE site :
<a href=http://www.geocities.com/yvesponline/>Yves P. Online!</a>

Exemple :
Yves P. Online!


Pour que l'on puisse vous écrire un e-mail :
<a href=mailto:y_woman@beatlegirl.com>Contactez-moi!</a>

Exemple :
Contactez-moi!


Créer un lien dans une même page :
Bon, je m'explique. Lorsque l'on fait une looooongue page, il est préférable de mettre des liens qui dirige le visiteur dans les différentes sections de la page. À la place de descendre la page indéfiniment, le visiteur n'a qu'à cliquer sur la section qu'il veut et il est dirigé vers cette section (c'est ce que j'ai fait au tout début de cette page). Si vous voulez voir un autre exemple de ce que j'essaie d'expliquer, allez dans la partie
Albums. Sélectionnez l'album de votre choix. Cliquez ensuite sur une des chansons (surlignée et écrite en jaune) et vous serez amené automatiquement aux paroles de la chanson qui sont inclues DANS LA MÊME PAGE. Oof... C'est facile quand on a compris, mais à expliquer...!
Donc à chaque début de section où vous voulez créer un lien (exemple : au début des paroles d'une chanson), écrivez :
<a name=inventez_un_nom_qui_correspond_a_votre_section_ici>
et écrivez le texte de la section après (le nom après le "a name" ne doit pas comprendre d'espaces.).
Pour finir, écrivez le nom des sections dont vous voulez faire un lien au début de la page, de préférence. Tapez ceci :
<a href=#écrivez_le_meme_nom_qui_correspond_a_votre_section_ici>Nom de la section</a>.
Oui, le petit # doit être placé après le "a href"!
Mettre une image sur votre site :
<img src=rbo.jpg>

Exemple :


Mettre une image comme fond :
<body background=etoiles.jpg>

Pour voir un exemple, cliquez ici

Vous devez mettre ce code au début, à côté des autres codes sur les couleurs, si possible (voir "Pour changer la couleur du fond, du texte et des liens").


Inclure une image dans un texte :
<img src=rbo.jpg align=left>

Exemple :

Vous devez écrire le code au début du paragraphe où vous voulez placer l'image (ici, j'ai placé le code avant le "vous").
Remarquez que le texte est collé sur la photo et non écrit en-dessous de la photo. C'est pourquoi il y a la partie "align" dans le code. "Align" permet à la photo de se placer dans le texte. Ici, j'ai écrit "left" à côté du align pour mettre ma photo à gauche. J'aurais pu écrire "right". Voici un exemple de la même photo mise à droite... Blablablablablablablablablablablablablablablablablabla...

Vous devez écrire le code au début du paragraphe où vous voulez placer l'image (ici, j'ai placé le code avant le "vous").
Remarquez que le texte est collé sur la photo et non écrit en-dessous de la photo. C'est pourquoi il y a la partie "align" dans le code. "Align" permet à la photo de se placer dans le texte. Ici, j'ai écrit "right" à côté du align pour mettre ma photo à droite. J'aurais pu écrire "left". L'exemple de la photo mise à gauche est en haut... Blablablablablablablablablablablablablablablablablabla...

Voici ce que cela donnerait si on enlevait la partie "align=" :
Comme vous le voyez, sans le "align", la première phrase est située en bas de la photo au lieu d'en haut. C'est franchement fatiguant à regarder, sans blagues!


Utiliser une image pour faire un lien vers une page web :
<a href=http://the_rbo.tripod.com/intro.html><img src=rbotete.gif>écrivez quelque chose ici si vous le voulez</a>

Exemple :
Avec écriture :
écrivez quelque chose ici si vous le voulez

Sans écriture :

À la place d'utiliser des mots pour faire un lien, on peut aussi utiliser une image (une bannière ou une flèche qui mène à l'introduction d'un site web, par exemple.).

Si vous ne voulez pas de bordure autour de la photo, ajoutez ceci : <border=0> après le "img src" :
<img src=rbotete.gif border=0>

Exemple :


Utiliser une image pour faire un lien vers une image :
<a href=rbocibloreilles.jpg><img src=rbocibloreilles.jpg height=50></a>

Exemple (cliquez sur la photo):

C'est une bonne méthode à utiliser lorsque vous avez beaucoup de photos à afficher sur une page. Celle-ci sera donc moins longue à s'afficher.


Aggrandir ou rétrécir une image :
<img src=rbocibloreilles.jpg height=150>

Exemple (ici, j'ai aggrandi la photo):

<img src=rbocibloreilles.jpg height=50>

Exemple (ici, j'ai rétréci la photo):

Je n'ai pas de trucs pour savoir quel chiffre écrire si vous voulez une grande ou une petite photo. Je fais toujours un test avec un chiffre pris au hasard et ensuite, je modifie le chiffre si c'est nécessaire.


Faire afficher un message lorsque l'on met la souris sur une image :
<img src=1988AGtravis.jpg alt="Ta gueule, Max!">0

Exemple (laissez votre souris sur la photo):
Ta gueule, Max!

Il faut ABSOLUMENT mettre les " " entre le début et la fin du message sinon vous n'aurez que le premier mot d'affiché (ici, seul le mot "Ta" serait affiché si je n'aurais pas mis les guillemets.).


Définir la couleur du fond, du texte et des liens :
<body bgcolor=330000 text=CC0066 link=6666CC vlink=FF3333>

Pour voir un exemple, cliquez ici
(Je ne peux pas vous montrer cet exemple sur cette page, parce que sinon les couleurs de ma page en seront affectées)

"bg color" veut dire "background color" ou "couleur du fond".
"text" veut dire "la couleur du texte".
"link" veut dire "la couleur des liens" et "vlink", "viewed link" ou "la couleur des liens lorsque ceux-ci ont été cliqué par la souris..."

Cliquez ici pour savoir le code de chaque couleur... c'est trrrrrrès pratique!


Changer la couleur du texte :
<font color=FFFF00>Nouvelle couleur jaune</font>

Exemple :
Nouvelle couleur jaune

Ceci est suggéré lorsque vous voulez changer une petite partie de la couleur du texte. Cliquez ici pour savoir le code de chaque couleur.


Mettre des points pour faire une liste :
<ul>
<li>Yves P. Pelletier
<li>André Ducharme
<li>Bruno Landry
<li>Guy A. Lepage
<li><a href=http://the_rbo.tripod.com/intro.html>Intro</a>
</ul>

Exemple :

(Le dernier est un exemple pour montrer que l'on peut faire une liste à points avec des liens.)


Faire une liste descriptive :
<dl>
<dt><a href=http://the_rbo.tripod.com/photos/photos.html>Photos</a>
<dd>J'ai fait plusieurs recherches pour trouver toutes ces photos de RBO. J'espère que vous les aimerez!
<p>
<dt>Tests (à venir)
<dd>Je vais bientôt tester vos connaissances sur RBO dans cette section...
</dl>

Exemple :

Photos
J'ai fait plusieurs recherches pour trouver toutes ces photos de RBO. J'espère que vous les aimerez!

Tests (à venir)
Je vais bientôt tester vos connaissances sur RBO dans cette section...
On utilise généralement ce type de liste dans l'introduction.
Sites à connaître!
Tripod
En plus d'avoir 50 Mo d'espace, vous aurez une VRAIE adresse à vous! (Avec tripod, vous pouvez avoir cette adresse : http://rbo_power.tripod.com alors qu'avec geocities, vous aurez quelque chose du genre : http://www.geocities.com/SunsetStrip/blablabla... Ce genre d'adresse est ennuyeux et ce n'est pas du tout personnalisé!) Tripod est facile à comprendre et c'est gratuit, je vous le conseille fortement. Il y a, bien sûr, de la publicité, mais celle-ci ne dérange pas trop. Certains sites mettent leur pub directement sur le texte de la page mais avec tripod, la pub est placée en haut de la page en ne cachant rien du tout. La pub est le seul prix à "payer" pour avoir une page gratuite!

Bravenet
Ce site offre plusieurs petites choses utiles et agréables (compteurs, guestbook, chambre pour le chat...). J'ADORE!


Il y a beaucoup trop de choses à apprendre sur le html. J'ai écrit le plus que je pouvais tout en essayant d'être facile à comprendre. Cette page est, selon moi, une très bonne base pour commencer un site. Si vous avez de la misère, envoyez moi un e-mail à y_woman@beatlegirl.com et écrivez "RBO et le HTML" pour sujet car je n'ouvre jamais du courrier provenant d'une personne inconnue. Mais, juste un petit conseil... relisez et relisez et testez les codes avant de m'envoyer un e-mail. C'est comme ça que j'ai appris le HTML. Alors, si vous créez un site sur RBO ou sur n'importe quel sujet grâce à cette page, dites-le moi! Je vais être très contente de recevoir des commentaires!

J'ai écrit cette page pour aider le monde à faire des sites sans trop de difficultés, mais aussi pour aider mon amie Mélanie qui veut faire un site sur notre cher George Harrison, décédé en novembre dernier. Bonne chance Mélanie!


George Harrison, 1943-2001

Voici son site!


Intro - Biographie - Membres - Photos - Albums - Yves P. Pelletier - The Documentaire - Entrevues
Tests - Nouvelles - Audio - Vidéo - Liens - Guestbook - Le HTML - La Créatrice
2001, evelyne lessard